<template>
  <div>
    <div>
      <el-button type="primary" @click="show">查询tableData</el-button>
      <el-button type="primary" @click="cle">清空</el-button>
      <div>询价单添加</div>
      <!-- 咨询信息 -->
      <div class="context">
        <el-card shadow="hover">
          <span>咨询信息</span>
          <hr />
          <el-form :model="data" label-width="auto" style="width: 100%">
            <el-form-item label="联系工程师" style="margin-top:18px">
              <el-input v-model="data.saleName" placeholder="默认填写创建该客户的销售姓名" style="max-width: 220px;" />
            </el-form-item>
            <el-form-item label="询价类型">
              <el-radio-group v-model="radio2">
                <el-radio :value=1>询价单</el-radio>
                <el-radio :value=2>咨询单</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
      <!-- if判断展示 -->
      <div>
        <!-- 如果是询价单 -->
        <!-- 产品信息 -->
        <div v-if="radio2 == 1" class="context">
          <el-card shadow="hover">
            <span>产品信息</span>
            <hr />
            <el-table :data="tableData" style="width: 100%">
              <el-table-column label="产品图片" width="80" header-align="center" align="center">
                <template #default="scope">
                  <el-image style=" width:100%; height: 100%" :src=scope.row.url />
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="产品名称" width="100" header-align="center" align="center" />
              <el-table-column prop="type" label="产品型号" width="80" header-align="center" align="center" />
              <el-table-column prop="price" label="产品价格" width="120" header-align="center" align="center" />
              <el-table-column label="需求数量" width="300" header-align="center" align="center">
                <template #default="scope">
                  <el-input-number @change="handleChange" v-model="scope.row.count" :min="1" :max="1000" />
                </template>
              </el-table-column>
              <el-table-column label="操作" header-align="center">
                <template #default="scope">
                  <el-button type="primary" :icon="Delete" title="删除" @click="del(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 增加产品 -->
            <template #footer>
              <el-button @click="addProduct" type="primary" :icon="Edit" title="增加产品"
                style="width: 100%; height: 50px;">添加产品</el-button>
            </template>
          </el-card>
        </div>
        <!-- 如果是咨询单 -->
        <div v-if="radio2 == 2" class="context">
          <el-card shadow="hover">
            <span>咨询信息</span>
            <hr />
            <!-- 内部字段会有出入,后续需要修改 -->
            <el-form :model="zx" label-width="auto" style="width: 100%">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="联系方式" style="margin-top:18px">
                    <el-input v-model="zx.phone" placeholder="请输入" style="max-width: 220px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="国家" style="margin-top:18px">
                    <el-input v-model="zx.country" placeholder="请输入" style="max-width: 220px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="公司名称" style="margin-top:18px">
                    <el-input v-model="zx.company" placeholder="请输入" style="max-width: 220px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="城市" style="margin-top:18px">
                    <el-input v-model="zx.city" placeholder="请输入" style="max-width: 220px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="电子邮件" style="margin-top:18px">
                    <el-input v-model="zx.email" placeholder="请输入" style="max-width: 220px;" />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="职位" style="margin-top:18px">
                    <el-input v-model="zx.posts" placeholder="请输入" style="max-width: 220px;" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="产品描述" style="margin-top:18px">
                    <el-input :rows="4" type="textarea" v-model="zx.description" placeholder="请输入"
                      style="max-width: 220px;" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </div>
      </div>
      <!-- 底部 保存后需要向父组件传递一个信息,已告诉父组件需要发送请求-->
      <Buttom @yes="yes" />
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { Delete, Edit } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import Buttom from "./buttom.vue";
import { list, clear } from '@/store/modules/commonData.ts'
import { saveCustomerInquiry } from '@/api/customer.ts'


//页面初始化
onMounted(() => {
  init();
})


//路由
const router = useRouter()
const route = useRoute()
//添加类型
const radio2 = ref(1)


//定义接收询价数据
const tableData = ref([])
//定义接收咨询数据
const zx = ref({
  phone: "",
})
//添加产品后的返回内容--此内容应该在页面加载时就预先展示
function init() {
  if (route.query.R == null) { }//先判断query有没有值,妹纸就跳过
  else {
    //有值后判断,pinia中的存储是否有值
    if (list.value.length == 0) {
      list.value.push(...JSON.parse(route.query.R))
      tableData.value = list.value
    }//pinia如果妹纸,直接添加即可
    else {
      //若有值,则对pinia和query进行去重
      const combinedArray = [...list.value, ...JSON.parse(route.query.R)];
      const uniqueArray = ref([]);
      const seenIds = new Set();
      combinedArray.forEach(item => {
        if (!seenIds.has(item.id)) {
          seenIds.add(item.id);
          uniqueArray.value.push(item);
        }
      });
      console.log(uniqueArray);
      //去重完成后,更新pinia和页面展示
      list.value = uniqueArray.value
      tableData.value = uniqueArray.value
    }
  }

}


//测试--查询
function show() {
  // const selectedData = JSON.parse(route.query.R)
  // console.log(selectedData)
  const selectedData = tableData.value
  console.log(selectedData)
}
//测试--删除
function cle() {
  clear();
  tableData.value = list.value
  console.log(tableData.value)
}


//保存的数据
const data = ref(
  {
    customerInquiryDetails: [],
    status: "1",
    type: radio2.value,
    saleName: ""
  }
)
//保存成功,发送请求并路由跳转
function yes() {
  //内部调用其他的方法,用于发送请求
  //发送请求前先转化
  //手动映射
  // const sw = ref([])
  // 定义目标对象
  // const tem = ref({});
  // tableData.value.forEach((e, index) => {
  //   tem.value.pid = e.id
  //   tem.value.picurl = e.coverImage
  //   tem.value.name = e.productName
  //   tem.value.model = e.model
  //   tem.value.price = e.price
  //   tem.value.num = e.count
  //   sw.value[index] = tem.value
  //   tem.value = {}
  // });
  // 封装映射函数---利用方法映射
  // 定义源数组--tableData
  // 使用 map 方法进行映射
  const sw = ref(
    tableData.value.map((e) => ({
      pid: e.id,
      picurl: e.coverImage,
      name: e.productName,
      model: e.model,
      price: e.price,
      num: e.count,
    }))
  );
  // console.log(sw.value)
  data.value.customerInquiryDetails = sw.value
  clear()
  // console.log(data.value)
  saveCustomerInquiry(data.value);
  //请求后路由跳转
  router.push({ name: "InquiryManagement" })
}


//添加产品--跳转页面
function addProduct() {
  router.push({ name: "ProductAddToInquiry" });
}
//删除添加的产品
function del(index) {
  tableData.value.splice(index, 1)
  list.value = tableData.value
}


//数量变化,触发事件--增加产品数量
function handleChange(count) {
  //数字放发生变化的时候触发
  console.log(count)
  list.value = tableData.value

}

</script>

<style scoped>
.context {
  margin-left: 10%;
  margin-right: 10%;
  margin-bottom: 30px;
}
</style>
